<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog"
  aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{ backdrop: 'static', keyboard: !saving }">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form *ngIf="active" #userForm="ngForm" novalidate autocomplete="off">
        <div class="modal-header">
          <h4 class="modal-title">
            <span *ngIf="_outsourcingType == 0">一般过程外包申请变更通知单</span>
            <span *ngIf="_outsourcingType == 1">关键过程外包申请变更通知单</span>
          </h4>
          <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" style="height: 500px;overflow: auto;">
          <div class="row">
            <div class="align-items-center">
              <!--<Primeng-TurboTable-Start>-->
              <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                <p-table #dataTable (onLazyLoad)="getTasks($event)" [value]="primengTableHelper.records"
                  rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                  [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                  [resizableColumns]="true">
                  <ng-template pTemplate="header">
                    <tr>
                      <th style="width: 100px">序号</th>
                      <th style="width: 220px">
                        类型
                      </th>
                      <th style="width: 150px">
                        变更申请单编号
                      </th>
                      <th style="width: 150px">
                        申请单编号
                      </th>
                      <th style="width: 150px">
                        申请单位
                      </th>
                      <th style="width: 150px">
                        合格供方单位
                      </th>
                      <th style="width: 150px">
                        任务号
                      </th>
                      <th style="width: 150px">
                        产品图号
                      </th>
                      <th style="width: 150px">
                        产品名称
                      </th>
                      <th style="width: 100px">
                        申请数量
                      </th>
                      <th style="width: 100px">
                        变更后数量
                      </th>
                      <th style="width: 150px">
                        加工状态
                      </th>
                      <th style="width: 130px">
                        交付进度
                      </th>
                      <th style="width: 200px">
                        变更原因
                      </th>
                      <th style="width: 300px">
                        当前外包产品进度
                      </th>
                    </tr>
                  </ng-template>
                  <ng-template pTemplate="body" let-record="$implicit" let-ri='rowIndex'>
                    <tr>
                      <th style="width: 100px">
                        {{ri+1}}
                      </th>
                      <th style="width: 220px">
                        <span *ngIf="record.outsourcingType==0" class="label m-badge m-badge--success m-badge--wide"
                          data-toggle="tooltip" title="外包项目类型" data-placement="top">
                          一般过程外包项目
                        </span>
                        <span *ngIf="record.outsourcingType==1" class="label m-badge m-badge--primary m-badge--wide"
                          data-toggle="tooltip" title="外包项目类型" data-placement="top">
                          关键过程外包项目
                        </span>
                        <span *ngIf="record.applyStatus==1" class="label m-badge m-badge--success m-badge--wide"
                          data-toggle="tooltip" title="申请状态" data-placement="top">
                          已暂停
                        </span>
                        <span *ngIf="record.applyStatus==2" class="label m-badge m-badge--success m-badge--wide"
                          data-toggle="tooltip" title="申请状态" data-placement="top">
                          完成
                        </span>
                        <span *ngIf="record.applyStatus==0" class="label m-badge m-badge--primary m-badge--wide"
                          data-toggle="tooltip" title="申请状态" data-placement="top">
                          运行
                        </span>
                        <span *ngIf="record.applyStatus==3" class="label m-badge m-badge--warning m-badge--wide"
                          data-toggle="tooltip" title="申请状态" data-placement="top">
                          已终止
                        </span>
                      </th>
                      <th style="width: 150px">
                        {{record.changedCode}}
                      </th>
                      <th style="width: 150px">
                        {{record.code}}
                      </th>
                      <th style="width: 150px">
                        {{record.applyUnit}}
                      </th>
                      <th style="width: 150px">
                        {{record.supplierUnit}}
                      </th>
                      <th style="width: 150px">
                        {{record.taskCode}}
                      </th>
                      <th style="width: 150px">
                        {{record.picNo}}
                      </th>
                      <th style="width: 150px">
                        {{record.taskName}}
                      </th>
                      <th style="width: 100px">
                        {{record.outsouringAmount}}
                      </th>
                      <th style="width: 100px">
                        {{record.changedAmount}}
                      </th>
                      <th style="width: 150px">
                        {{record.workStatus}}
                      </th>
                      <th style="width: 130px">
                        {{record.deliveryRate | momentFormat:'L'}}
                      </th>
                      <th style="width: 200px">
                        {{record.changeRemark}}
                      </th>
                      <th style="width: 300px">
                        {{record.currentOutsouringProgress}}
                      </th>
                    </tr>
                  </ng-template>
                </p-table>
                <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                  {{'NoData' | localize}}
                </div>
                <div class="primeng-paging-container">
                  <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                    (onPageChange)="getTasks($event)" [totalRecords]="primengTableHelper.totalRecordsCount"
                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">

                  </p-paginator>
                  <span class="total-records-count">
                    {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                  </span>
                </div>
              </div>
              <!--<Primeng-TurboTable-End>-->
            </div>
          </div>


        </div>
      </form>
    </div>
  </div>

</div>